<template>
  <div>
    <!-- 导航 -->
    <xwBreadCrumb :items="crumbItems" />
    <!-- 搜索 -->
    <div class="search">
      <el-input ref="kwRef" placeholder="请输入角色名称" clearable />
      <el-button type="primary" icon="el-icon-search">搜索一下</el-button>
      <Btn action="addAuth" icon="el-icon-plus" type="success" @actionFn="visible = true">添加权限</Btn>
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :default-expand-all="true"
        :tree-props="treeProps"
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="name" label="权限名称" width="180"> </el-table-column>
        <el-table-column prop="ismenu" label="是否菜单" width="180">
          <template slot-scope="prop">
            <el-tag type="default" v-if="prop.row.ismenu == 1">是</el-tag>
            <el-tag type="danger" v-if="prop.row.ismenu == 0">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由地址"> </el-table-column>
      </el-table>
    </div>
    <!-- 弹层 -->
    <authForm :visible.sync="visible" />
  </div>
</template>

<script>
import Btn from '@/components/Btn'
import authForm from './ui/authForm.vue'
export default {
  components: {
    Btn,
    authForm
  },
  data() {
    return {
      visible: false,
      treeProps: { children: 'children', hasChildren: 'hasChildren' },
      crumbItems: [],
      tableData: [
        {
          id: 1,
          name: '后台首页',
          path: '/admin/dashoard',
          ismenu: 1
        },
        {
          id: 3,
          name: '用户管理',
          path: '',
          ismenu: 1,
          children: [
            {
              id: 31,
              name: '用户列表',
              path: '/admin/user',
              ismenu: 1
            },
            {
              id: 32,
              name: '添加用户',
              path: 'adduser',
              ismenu: 0
            }
          ]
        }
      ]
    }
  },
  created() {
    this.crumbItems = this.$route.meta.crumbItems || []
  }
}
</script>

<style lang="scss" scoped>
.search {
  margin-top: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  .el-input {
    width: 300px;
    margin-right: 20px;
  }
}
</style>
